<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2c3e50;
            --success-color: #2ecc71;
            --warning-color: #f39c12;
            --danger-color: #e74c3c;
            --light-bg: #f8f9fa;
            --dark-text: #343a40;
        }
        
        body {
            background-color: #f5f7fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: var(--dark-text);
            padding-bottom: 50px;
        }
        
        .header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 25px 0;
            margin-bottom: 30px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .search-panel {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            padding: 25px;
            margin-bottom: 30px;
        }
        
        .card {
            border-radius: 10px;
            overflow: hidden;
            border: none;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            margin-bottom: 20px;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
        }
        
        .card-header {
            background: linear-gradient(to right, var(--primary-color), #2980b9);
            color: white;
            font-weight: 600;
            padding: 15px 20px;
            font-size: 18px;
        }
        
        .table-responsive {
            border-radius: 8px;
            overflow: hidden;
        }
        
        .table {
            margin-bottom: 0;
        }
        
        .table thead th {
            background: linear-gradient(to bottom, var(--primary-color), #2980b9);
            color: white;
            font-weight: 500;
            padding: 15px;
            vertical-align: middle;
        }
        
        .table tbody tr {
            transition: all 0.2s ease;
        }
        
        .table tbody tr:hover {
            background-color: rgba(223, 239, 255, 0.5);
        }
        
        .status-badge {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
            display: inline-block;
            min-width: 80px;
            text-align: center;
        }
        
        .status-pending {
            background-color: #ffeaa7;
            color: #d35400;
        }
        
        .status-paid {
            background-color: #55efc4;
            color: #006442;
        }
        
        .status-shipped {
            background-color: #74b9ff;
            color: #0c2461;
        }
        
        .status-completed {
            background-color: #a29bfe;
            color: #2d3436;
        }
        
        .price-column {
            font-weight: 600;
            color: #e17055;
        }
        
        .user-badge {
            display: inline-flex;
            align-items: center;
            background-color: #e3f2fd;
            color: #1565c0;
            border-radius: 20px;
            padding: 4px 12px;
            font-size: 14px;
        }
        
        .user-badge img {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-right: 8px;
            object-fit: cover;
        }
        
        .action-cell .btn {
            padding: 5px 10px;
            font-size: 14px;
            margin-right: 5px;
        }
        
        .pagination {
            margin-top: 20px;
        }
        
        .page-item.active .page-link {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .page-link {
            color: var(--primary-color);
        }
        
        .stats-card {
            color: var(--dark-text);
            text-align: center;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        
        .stats-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        }
        
        .stats-card i {
            font-size: 2.5rem;
            margin-bottom: 15px;
        }
        
        .order-pending { background: linear-gradient(to right, #ffeaa7, #fdcb6e); }
        .order-paid { background: linear-gradient(to right, #55efc4, #00b894); }
        .order-shipped { background: linear-gradient(to right, #74b9ff, #0984e3); }
        .order-completed { background: linear-gradient(to right, #a29bfe, #6c5ce7); }
        
        .highlight {
            animation: highlight 2s;
        }
        
        @keyframes highlight {
            0% { background-color: rgba(255, 235, 59, 0.8); }
            100% { background-color: transparent; }
        }
        
        .no-orders {
            text-align: center;
            padding: 40px;
            color: #636e72;
        }
        
        .loading-spinner {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 30px;
        }
        
        .spinner-border {
            width: 3rem; 
            height: 3rem;
        }
        
        .search-highlight {
            background-color: #fff9c4;
            padding: 0 3px;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1><i class="bi bi-cart-check me-2"></i>订单管理系统</h1>
                    <p class="lead mb-0">高效管理您的所有订单</p>
                </div>
                <div class="d-flex align-items-center">
                    <div class="me-3">
                        <div class="user-badge">
                            <img src="https://ui-avatars.com/api/?name=Admin&background=0D8ABC&color=fff" alt="Admin">
                            <span>管理员</span>
                        </div>
                    </div>
                    <button class="btn btn-light">
                        <i class="bi bi-box-arrow-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <div class="container">
        <!-- 搜索面板 -->
        <div class="card search-panel">
            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">订单号</label>
                    <input id="search_oid" type="text" class="form-control" placeholder="输入订单号">
                </div>
                <div class="col-md-3">
                    <label class="form-label">商品名称</label>
                    <input id="search_title" type="text" class="form-control" placeholder="输入商品名称">
                </div>
                <div class="col-md-2">
                    <label class="form-label">订单状态</label>
                    <select id="status_choice" class="form-select">
                        <option value="">全部状态</option>
                        <option value="1">待支付</option>
                        <option value="2">已支付</option>
                        <option value="3">已发货</option>
                        <option value="4">已完成</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">订单用户</label>
                    <input id="search_user" type="text" class="form-control" placeholder="输入用户名称">
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <div class="d-flex w-100">
                        <button id="btn_search" class="btn btn-primary me-2 flex-grow-1">
                            <i class="bi bi-search me-1"></i>搜索
                        </button>
                        <button id="reset" class="btn btn-outline-secondary">
                            <i class="bi bi-arrow-repeat"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 统计卡片 -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="stats-card order-pending">
                    <i class="bi bi-clock"></i>
                    <h4>待支付</h4>
                    <h2 id="pending-count">9</h2>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card order-paid">
                    <i class="bi bi-credit-card"></i>
                    <h4>已支付</h4>
                    <h2 id="paid-count">2</h2>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card order-shipped">
                    <i class="bi bi-truck"></i>
                    <h4>已发货</h4>
                    <h2 id="shipped-count">0</h2>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card order-completed">
                    <i class="bi bi-check-circle"></i>
                    <h4>已完成</h4>
                    <h2 id="completed-count">0</h2>
                </div>
            </div>
        </div>
        
        <!-- 订单列表 -->
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span><i class="bi bi-list-check me-2"></i> 订单列表</span>
                <div>
                    <span class="badge bg-primary me-2" id="results-count">13 条记录</span>
                    <button class="btn btn-sm btn-success">
                        <i class="bi bi-plus-circle me-1"></i>新增订单
                    </button>
                </div>
            </div>
            
            <div class="table-responsive">
                <table class="table table-hover align-middle" id="order-table">
                    <thead>
                        <tr>
                            <th>订单ID</th>
                            <th>订单号</th>
                            <th>商品名称</th>
                            <th>价格</th>
                            <th>用户</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="order-table-body">
                        <!-- 表格内容将通过JavaScript动态加载 -->
                    </tbody>
                </table>
            </div>
            
            <!-- 分页控件 -->
            <div class="d-flex justify-content-between align-items-center p-3 bg-light">
                <div>显示 <span id="current-items">1-10</span> 条，共 <span id="total-items">13</span> 条记录</div>
                <nav>
                    <ul class="pagination mb-0" id="pagination">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- 订单详情模态框 -->
    <div class="modal fade" id="orderDetailModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title">订单详细信息</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="order-detail-content">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-bold">订单号</label>
                                <p id="detail-oid">ORD-20230701-001</p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-bold">商品名称</label>
                                <p id="detail-title">iPhone 14 Pro Max</p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-bold">价格</label>
                                <p id="detail-price" class="fw-bold text-danger">¥8999.00</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-bold">订单状态</label>
                                <p><span class="status-badge status-pending" id="detail-status">待支付</span></p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-bold">下单用户</label>
                                <p id="detail-user">
                                    <span class="user-badge">
                                        <img src="https://ui-avatars.com/api/?name=Admin&background=0D8ABC&color=fff" alt="Admin">
                                        <span>admin</span>
                                    </span>
                                </p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-bold">创建时间</label>
                                <p id="detail-created">2023-07-01 10:23</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">打印订单</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 模拟后端返回的数据
        const orderData = {
            total: 13,
            total_pages: 2,
            current_page: 1,
            page_size: 10,
            rows: [
                {id: 25, oid: '人人人人人人人人人人人人人', title: '人人人人人人人人人', price: 11.0, status: 1, status_display: '待支付', user: {id: 1, username: 'admin'}},
                {id: 24, oid: '去去去去去去去去去去去去去去去', title: '是是是是是是是是是是', price: 111.0, status: 1, status_display: '待支付', user: {id: 1, username: 'admin'}},
                {id: 23, oid: 'sssssssss', title: 'ssssss', price: 33.0, status: 1, status_display: '待支付', user: {id: 1, username: 'admin'}},
                {id: 22, oid: '22222222222', title: '问问', price: 44.0, status: 1, status_display: '待支付', user: {id: 1, username: 'admin'}},
                {id: 21, oid: '6666666666666', title: '666', price: 66.0, status: 1, status_display: '待支付', user: {id: 6, username: '小瘪三'}},
                {id: 19, oid: '5555555555', title: '555', price: 5.0, status: 1, status_display: '待支付', user: {id: 4, username: '楚云飞'}},
                {id: 18, oid: '333333333', title: '333', price: 333.0, status: 2, status_display: '已支付', user: {id: 5, username: '小日子'}},
                {id: 17, oid: '22222222222', title: '222', price: 22.0, status: 1, status_display: '待支付', user: {id: 3, username: '李四'}},
                {id: 16, oid: '111111111111111', title: '11111', price: 111.0, status: 2, status_display: '已支付', user: {id: 1, username: 'admin'}},
                {id: 11, oid: 'order-202507281513', title: 'order-202507281512', price: 122.0, status: 1, status_display: '待支付', user: {id: 6, username: '小瘪三'}}
            ]
        };

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化加载订单
            renderOrders(orderData);
            
            // 更新统计信息
            updateStats();
            
            // 搜索按钮事件
            document.getElementById('btn_search').addEventListener('click', searchOrders);
            
            // 重置按钮事件
            document.getElementById('reset').addEventListener('click', resetSearch);
        });

        // 渲染订单到表格
        function renderOrders(data) {
            const tbody = document.getElementById('order-table-body');
            tbody.innerHTML = '';
            
            if (data.rows.length === 0) {
                tbody.innerHTML = `
                    <tr>
                        <td colspan="7" class="text-center py-5">
                            <i class="bi bi-search" style="font-size: 3rem; color: #adb5bd;"></i>
                            <h4 class="mt-3">没有找到符合条件的订单</h4>
                            <p class="text-muted">请尝试不同的搜索条件</p>
                        </td>
                    </tr>
                `;
                return;
            }
            
            data.rows.forEach(order => {
                let statusClass = 'status-pending';
                if (order.status === 2) statusClass = 'status-paid';
                if (order.status === 3) statusClass = 'status-shipped';
                if (order.status === 4) statusClass = 'status-completed';
                
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${order.id}</td>
                    <td>${order.oid}</td>
                    <td>${order.title}</td>
                    <td class="price-column">¥${order.price.toFixed(2)}</td>
                    <td>
                        <span class="user-badge">
                            <img src="https://ui-avatars.com/api/?name=${order.user.username}&background=0D8ABC&color=fff" alt="${order.user.username}">
                            <span>${order.user.username}</span>
                        </span>
                    </td>
                    <td><span class="status-badge ${statusClass}">${order.status_display}</span></td>
                    <td class="action-cell">
                        <button class="btn btn-sm btn-primary view-detail" data-id="${order.id}">
                            <i class="bi bi-eye"></i> 详情
                        </button>
                        <button class="btn btn-sm btn-warning">
                            <i class="bi bi-pencil"></i>
                        </button>
                        <button class="btn btn-sm btn-danger">
                            <i class="bi bi-trash"></i>
                        </button>
                    </td>
                `;
                
                tbody.appendChild(row);
            });
            
            // 添加查看详情事件
            document.querySelectorAll('.view-detail').forEach(btn => {
                btn.addEventListener('click', function() {
                    const orderId = this.getAttribute('data-id');
                    showOrderDetail(orderId);
                });
            });
            
            // 更新分页信息
            updatePagination(data);
        }
        
        // 显示订单详情
        function showOrderDetail(orderId) {
            // 在实际应用中，这里应该发送AJAX请求获取订单详情
            const order = orderData.rows.find(o => o.id == orderId);
            if (!order) return;
            
            // 设置状态样式
            let statusClass = 'status-pending';
            if (order.status === 2) statusClass = 'status-paid';
            if (order.status === 3) statusClass = 'status-shipped';
            if (order.status === 4) statusClass = 'status-completed';
            
            // 更新模态框内容
            document.getElementById('detail-oid').textContent = order.oid;
            document.getElementById('detail-title').textContent = order.title;
            document.getElementById('detail-price').textContent = `¥${order.price.toFixed(2)}`;
            document.getElementById('detail-status').textContent = order.status_display;
            document.getElementById('detail-status').className = `status-badge ${statusClass}`;
            document.getElementById('detail-user').innerHTML = `
                <span class="user-badge">
                    <img src="https://ui-avatars.com/api/?name=${order.user.username}&background=0D8ABC&color=fff" alt="${order.user.username}">
                    <span>${order.user.username}</span>
                </span>
            `;
            document.getElementById('detail-created').textContent = '2023-07-30 14:30'; // 实际数据中应包含创建时间
            
            // 显示模态框
            const modal = new bootstrap.Modal(document.getElementById('orderDetailModal'));
            modal.show();
        }
        
        // 更新统计信息
        function updateStats() {
            // 在实际应用中，这些数据应该来自后端
            document.getElementById('pending-count').textContent = 9;
            document.getElementById('paid-count').textContent = 2;
            document.getElementById('shipped-count').textContent = 0;
            document.getElementById('completed-count').textContent = 0;
            document.getElementById('results-count').textContent = `${orderData.total} 条记录`;
            document.getElementById('total-items').textContent = orderData.total;
        }
        
        // 更新分页信息
        function updatePagination(data) {
            const pagination = document.getElementById('pagination');
            pagination.innerHTML = '';
            
            // 上一页按钮
            const prevItem = document.createElement('li');
            prevItem.className = 'page-item' + (data.current_page === 1 ? ' disabled' : '');
            prevItem.innerHTML = `
                <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            `;
            pagination.appendChild(prevItem);
            
            // 页码按钮
            for (let i = 1; i <= data.total_pages; i++) {
                const pageItem = document.createElement('li');
                pageItem.className = 'page-item' + (i === data.current_page ? ' active' : '');
                pageItem.innerHTML = `<a class="page-link" href="#">${i}</a>`;
                pagination.appendChild(pageItem);
            }
            
            // 下一页按钮
            const nextItem = document.createElement('li');
            nextItem.className = 'page-item' + (data.current_page === data.total_pages ? ' disabled' : '');
            nextItem.innerHTML = `
                <a class="page-link" href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            `;
            pagination.appendChild(nextItem);
            
            // 添加页码点击事件
            document.querySelectorAll('#pagination .page-link').forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    // 在实际应用中，这里应该请求对应页码的数据
                    alert('在实际应用中，这里会请求对应页码的数据');
                });
            });
            
            // 更新显示范围
            const start = (data.current_page - 1) * data.page_size + 1;
            const end = Math.min(data.current_page * data.page_size, data.total);
            document.getElementById('current-items').textContent = `${start}-${end}`;
        }
        
        // 搜索订单
        function searchOrders() {
            // 在实际应用中，这里应该发送AJAX请求到后端
            const oid = document.getElementById('search_oid').value.toLowerCase().trim();
            const title = document.getElementById('search_title').value.toLowerCase().trim();
            const status = document.getElementById('status_choice').value;
            const user = document.getElementById('search_user').value.toLowerCase().trim();
            
            // 模拟搜索过程
            document.getElementById('order-table-body').innerHTML = `
                <tr>
                    <td colspan="7" class="text-center py-4">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">加载中...</span>
                        </div>
                        <p class="mt-2">正在搜索订单...</p>
                    </td>
                </tr>
            `;
            
            // 模拟AJAX延迟
            setTimeout(() => {
                // 在实际应用中，这里应该使用后端返回的搜索结果
                const filteredData = {...orderData};
                
                // 应用搜索条件
                if (oid || title || status || user) {
                    filteredData.rows = orderData.rows.filter(order => {
                        if (oid && !order.oid.toLowerCase().includes(oid)) return false;
                        if (title && !order.title.toLowerCase().includes(title)) return false;
                        if (status && order.status != status) return false;
                        if (user && !order.user.username.toLowerCase().includes(user)) return false;
                        return true;
                    });
                    
                    filteredData.total = filteredData.rows.length;
                    filteredData.total_pages = Math.ceil(filteredData.total / filteredData.page_size);
                }
                
                // 渲染搜索结果
                renderOrders(filteredData);
                
                // 高亮搜索关键词
                highlightSearchTerms(oid, title);
            }, 800);
        }
        
        // 高亮搜索关键词
        function highlightSearchTerms(oid, title) {
            const rows = document.querySelectorAll('#order-table-body tr');
            
            rows.forEach(row => {
                const oidCell = row.querySelector('td:nth-child(2)');
                const titleCell = row.querySelector('td:nth-child(3)');
                
                if (oid && oidCell) {
                    const text = oidCell.textContent;
                    const regex = new RegExp(oid, 'gi');
                    oidCell.innerHTML = text.replace(regex, match => 
                        `<span class="search-highlight">${match}</span>`
                    );
                }
                
                if (title && titleCell) {
                    const text = titleCell.textContent;
                    const regex = new RegExp(title, 'gi');
                    titleCell.innerHTML = text.replace(regex, match => 
                        `<span class="search-highlight">${match}</span>`
                    );
                }
            });
        }
        
        // 重置搜索
        function resetSearch() {
            document.getElementById('search_oid').value = '';
            document.getElementById('search_title').value = '';
            document.getElementById('status_choice').selectedIndex = 0;
            document.getElementById('search_user').value = '';
            
            // 重新加载原始数据
            renderOrders(orderData);
        }
    </script>
</body>
</html>